<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix Carousel with custom styles</title>

    <link rel="stylesheet" href="../demos.css" />
    <script type="module" src="../../define/SelectableButton.js"></script>
    <script type="module" src="../../define/Carousel.js"></script>
    <style>
      html {
        height: 100%;
      }

      body {
        background: #fef4d2;
        height: 100%;
        padding: 0;
      }
    </style>
  </head>

  <body role="main">
    <div class="demo fullScreen" style="background: #fef4d2; padding: 20px">
      <style>
        #customCarousel {
          flex: 1;
          max-height: 100%;
        }

        #customCarousel img {
          border: 10px solid white;
          box-shadow: 1px 7px 10px 5px rgba(0, 0, 0, 0.2);
          box-sizing: border-box;
          height: 100%;
          object-fit: cover;
          display: inline-block;
          transform: scale(0.9);
          width: 100%;
        }

        #customCarousel::part(arrow-button) {
          color: #83af9b;
          font-size: 48px;
          transition: color 0.5s, -webkit-text-stroke-color 0.5s;
          -webkit-text-stroke: 2px transparent;
        }
        #customCarousel::part(arrow-button):--disabled {
          color: transparent;
          -webkit-text-stroke-color: #c8c8a9;
        }
        #customCarousel::part(arrow-button):hover:not(:--disabled) {
          background: linear-gradient(
            rgba(0, 0, 0, 0.1),
            transparent,
            rgba(0, 0, 0, 0.1)
          );
        }

        elix-selectable-button {
          color: #fc9d9a;
          font-size: 24px;
          margin: 0 0.2em;
          transition: color 0.5s, transform 0.5s;
          will-change: color, opacity, transform;
        }
        elix-selectable-button:hover {
          color: #fe4365;
          opacity: 1;
        }
        elix-selectable-button:--selected {
          color: #fe4365;
          transform: scale(1.4);
        }

        .flower::after {
          content: "●";
        }
        elix-selectable-button:--selected .flower::after {
          content: "✿";
        }
      </style>
      <elix-carousel
        id="customCarousel"
        aria-label="Bunnies"
        arrow-button-overlap="false"
        proxy-list-overlap="false"
        show-arrow-buttons="true"
      >
        <div slot="arrowButtonPrevious">↫</div>
        <div slot="arrowButtonNext">↬</div>
        <elix-selectable-button slot="proxy">
          <span class="flower"></span>
        </elix-selectable-button>
        <elix-selectable-button slot="proxy">
          <span class="flower"></span>
        </elix-selectable-button>
        <elix-selectable-button slot="proxy">
          <span class="flower"></span>
        </elix-selectable-button>
        <elix-selectable-button slot="proxy">
          <span class="flower"></span>
        </elix-selectable-button>
        <elix-selectable-button slot="proxy">
          <span class="flower"></span>
        </elix-selectable-button>
        <!--
          Bunny images in public domain from Flickr or from Unsplash with
          Unsplash license (https://unsplash.com/license)
        -->
        <img src="../images/bunnies/bunny4.jpg" alt="White bunny" />
        <img
          src="../images/bunnies/bunny3.jpg"
          alt="Close-up of face of brown bunny"
        />
        <img
          src="../images/bunnies/bunny5.jpg"
          alt="Fluffy bunny in lawn enclosure"
        />
        <img src="../images/bunnies/bunny1.jpg" alt="Brown bunny" />
        <img
          src="../images/bunnies/bunny2.jpg"
          alt="Bunny on grass eating a flower"
        />
      </elix-carousel>
    </div>
  </body>
</html>
